<template>
  <div class="login">
    <!-- 2、配置并实现登录页面 -->
    <div class="img">
      <img src="../assets//logo.png" alt="" />
    </div>
    <h1>华为账号</h1>
    <p>登录账号以使用云空间、应用市场及更多服务</p>
    <van-cell-group :border="false">
      <van-cell title="国家/地区" is-link value="中国 +86" />
    </van-cell-group>


    <!-- 表单 -->
    <van-form @failed="onFailed">
      <van-cell-group>
        <!-- 通过 pattern 进行正则校验 -->
        <van-field
          v-model="fromInfo.phone"
          name="pattern"
          label="手机号"
          :rules="[
            { pattern, message: '请输入正确的手机号' },
            { required: true, message: '手机号必填' },
          ]"
          @input="sjh"
        />

        <van-field
          v-model="fromInfo.sms"
          center
          clearable
          label="短信验证码"
          :rules="[
            { pattern: /^\d{6}$/, message: '请输入正确的验证码' },
            { required: true, message: '验证码必填' },
          ]"
        >
          <template #button>
            <van-button
              size="small"
              type="primary"
              :disabled="disabled"
              @click="djs"
              >{{ msg }}</van-button
            >
          </template>
        </van-field>
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" :disabled="dis" @click="submitForm">
          登录/注册
        </van-button>
      </div>
    </van-form>
    <p class="mm">密码登录</p>
    <p class="qi">其他方式登录</p>
    <div class="img">
      <img src="../assets//1.png" alt="" />
    </div>
    <div class="di">
      <span>遇到问题</span>| <span>用户协议</span>|
      <span>隐私声明</span>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import axios from "@/request/index";
import { useRouter } from "vue-router";
import { useCounterStore } from '@/store/index'

const store = useCounterStore()
const router = useRouter()
const fromInfo = reactive({
  phone: "",
  sms: "",
});
const pattern = /^1[3-9]\d{9}$/;
const msg = ref("获取验证码");
const disabled = ref(true);
const dis = ref(true);
// 3、实现校验手机号 11位数字成功后“获取验证码”按钮可点击
const sjh = () => {
  if (pattern.test(fromInfo.phone)) {
    disabled.value = false;
  } else {
    disabled.value = true;
  }
};
// 4、点击获取验证码变成倒计时60S，结束后再次变成获取验证码
let time = 5;
let timer;
const djs = () => {
  disabled.value = true;
  timer = setInterval(() => {
    if (time > 0) {
      time--;
      msg.value = `倒计时${time}S`;
    } else {
      clearInterval(timer);
      time = 5;
      msg.value = `获取验证码`;
      disabled.value = false;
      // 5、mock接口实现获取6位随机数验证码，并在点击获取验证码后调用接口获取验证码回显到短信验证码
      axios.get("/getyzm").then((res) => {
        // console.log(res);
        fromInfo.sms = res.yzm;
// 6、实现手机号与验证码必填且校验验证码必须为6位数字，校验成功登录按钮可点击
        if (/^\d{6}$/.test(fromInfo.sms)) {
            dis.value = false
        } else {
            dis.value = true
        }
      });
    }
  }, 1000);
};

const submitForm = () =>{
    console.log(111);
    axios.post('/api/login',{
        data:{
            phone:fromInfo.phone,
            sms:fromInfo.sms
        }
    }).then((res)=>{
        console.log(res);
        // 8、点击登录调用接口获取信息使用pinia存储并做持久化缓存，跳转商品搜索页面
        store.setUserInfo(res)
    })

    router.push('/search')
}
</script>
<style scoped lang="scss">
.login {
  .img {
    margin: 10px;
    display: flex;
    justify-content: space-around;
  }
  h1 {
    text-align: center;
  }
  p {
    text-align: center;
    color: #656363;
  }
  :deep(.van-cell__title) {
    margin-left: 18px;
  }
  #van-field-68-label {
    margin-left: 20px;
  }
  .mm {
    color: rgb(22, 130, 232);
    text-align: center;
  }
  .qi {
    text-align: center;
    font-size: 15px;
    margin-top: 75px;
  }
  .di {
    margin-top: 25px;
    text-align: center;
    span {
      margin: 0 5px;
      color: rgb(22, 130, 232);
    }
  }
}
</style>